<!--
Template Name: mixTable
Create author: qinglong
Create Time  : 2020-12-16
-->
<template>
  <el-table ref="table" class="mix-table" :header-row-style="elTableHeadRow" height="500" row-key="id" :fit="true" v-bind="$attrs" v-on="$listeners">
    <div slot="empty" class="el-empty">
      <svg-icon icon-class="icon-empty" size="60"></svg-icon>
      <div>暂无数据</div>
    </div>
    <template v-for="(item, index) in fields">
      <el-table-column v-if="['index', 'selection', 'expand'].includes(item.type)" :key="index" v-bind="item" align="center" />
      <el-table-column v-else-if="['button', 'manage'].includes(item.type)" :key="index" v-bind="item" align="center">
        <template slot-scope="{ row, column, $index }">
          <template v-if="item.type === 'button'">
            <template v-if="Array.isArray(item.options)">
              <template v-for="(k, i) in item.options">
                <el-button :key="`${index}-${i}`" v-bind="k" @click="handleClick(k, row, column, $index)">{{ k.label }}</el-button>
              </template>
            </template>
            <el-button v-else v-bind="item.options" @click="handleClick(item.options, row, column, $index)">{{ item.options.label }}</el-button>
          </template>
          <template v-else-if="item.type === 'manage'">
            <template v-if="Array.isArray(item.options)">
              <template v-for="(k, i) in item.options">
                <el-link tag="span" v-show="getShow(k,row)" :underline="false" :key="`${index}-${i}`" v-bind="k" @click.prevent="handleClick(k, row, column, $index)">{{ k.label }}</el-link>
              </template>
            </template>
            <el-link tag="span" :underline="false" v-else v-bind="item.options" @click.prevent="handleClick(item.options, row, column, $index)">{{ item.options.label }}</el-link>
          </template>
        </template>
      </el-table-column>
      <el-table-column v-else-if="item.type" :key="index" v-bind="item" width="120" align="center">
        <template slot-scope="{ row }">
          <template v-if="item.type === 'tag'">
            <template v-if="item.options && Array.isArray(item.options)">
              <template v-for="k in item.options">
                <el-tag v-if="row[item.prop] == k.value" :key="k.value">{{k.label}}</el-tag>
              </template>
            </template>
          </template>
          <template v-else-if="item.type === 'tab'">
            <template v-if="item.options && Array.isArray(item.options)">
              <template v-for="k in item.options">
                <span v-if="row[item.prop] == k.value" :key="k.value">{{k.label}}</span>
              </template>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column v-else :key="index" v-bind="item || {}" show-overflow-tooltip align="center" />
    </template>
  </el-table>
</template>
<script>
export default {
  name: 'mixTable',
  props: {
    fields: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      elTableHeadRow: {
        color: '#333333',
        backgroundColor: '#ffffff !important',
      },
    };
  },
  methods: {
    async exportDownload() {
      console.log('导出');
    },
    getShow(item, row) {
      if (typeof item.isShow == 'function') return item.isShow(row, item);
      if (item.isShow === undefined) return true;
      return item.isShow;
    },
    handleIf(a, b, c, d) {
      if (a === b) return c;
      return d;
    },
    handlerSelectable($event, item) {
      console.log($event, item);
      return true;
    },
    handleClick(item, row, ceil, index) {
      if (item.type == 'export') {
        this.exportDownload();
        return;
      }
      let fn = () => {};
      ['click', 'change'].forEach((e) => {
        if (item[e] && item[e] instanceof Function) fn = item[e];
        if (item[e] && item[e] instanceof String) fn = this.$parent[item[e]];
      });
      fn({ row, ceil, index });
    },
  },
};
</script>
